<template>
	<view class="almanac">
		<view>
			<!-- 顶部日期 -->
			<view class="almanac_top_time flex_row_center_center">
				<view>{{lunarInfo.nowYear}}年{{lunarInfo.nowMonth}}月{{lunarInfo.nowDay}}日</view>
			    <picker mode="date" @change="changeTime">
					<view class="cuIcon-unfold"></view>
				</picker>
			</view>
			<view class="almanac_lunar ">
				<view class="flex_row_center_center">
					<image class="almanac_lunar_image" @click="getleft" src="@/static/images/other/arrow_left.png" mode="aspectFit"></image>
					<view class="almanac_lunar_text">{{lunarInfo.lunarMonth}}月{{lunarInfo.lunarDay}}</view>
					<image class="almanac_lunar_image" @click="getright" src="@/static/images/other/arrow_right.png" mode="aspectFit"></image>
				</view>
				<view class="flex_row_center_center almanac_lunar_time">
					<view>{{lunarInfo.ganZhiYear}}年</view>
					<view>{{lunarInfo.ganZhiMonth}}月</view>
					<view>{{lunarInfo.ganZhiDay}}日</view>
					<view>星期{{lunarInfo.week}}</view>
				</view>
			</view>
			<view class="almanac_lunar_YiJi">
				<view class="flex_row_start_center">
					<image src="@/static/images/other/lunar_yi.png" mode="aspectFit" class="almanac_lunar_YiJi_icon"></image>
				    <view class="almanac_lunar_YiJi_text flex_row_start_start">
						<view  v-for="(item,index) in lunarInfo.yi" :key="index">{{item}}</view>
					</view>
				</view>
				<view class="flex_row_start_start " style="margin-top: 32rpx;">
					<image src="@/static/images/other/lunar_ji.png" mode="aspectFit" class="almanac_lunar_YiJi_icon"></image>
				    <view class="almanac_lunar_YiJi_text flex_row_start_start">
						<view  v-for="(item,index) in lunarInfo.ji" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="almanac_lunar_direction flex_row_start_center">
				<view class="almanac_lunar_direction_name ">吉神方位</view>
				<view class="flex_row_around_center almanac_lunar_direction_right">
					<view class="almanac_lunar_direction_item ">喜神{{jiGodDirection.xi}}</view>
					<view class="almanac_lunar_direction_item ">阴贵{{jiGodDirection.yingui}}</view>
					<view class="almanac_lunar_direction_item ">阳贵{{jiGodDirection.yanggui}}</view>
					<view class="almanac_lunar_direction_item ">福神{{jiGodDirection.fu}}</view>
					<view class="almanac_lunar_direction_item ">财神{{jiGodDirection.cai}}</view>
				</view>
			</view>
			<view class="flex_row_start_center almanac_lunar_wuxing">
				<view class="almanac_lunar_wuxing_item flex_row_center_center">
					<view class="almanac_lunar_wuxing_item_l">五行</view>
					<view>{{lunarInfo.wuxing}}</view>
				</view>
				<view class="almanac_lunar_wuxing_item flex_row_center_center">
					<view class="almanac_lunar_wuxing_item_l">相冲</view>
					<view>冲{{lunarInfo.chong}}</view>
				</view>
				<view class="almanac_lunar_wuxing_item flex_row_center_center">
					<view class="almanac_lunar_wuxing_item_l">岁煞</view>
					<view>煞{{lunarInfo.sha}}</view>
				</view>
			</view>
			<view class="almanac_lunar_more flex_row_between_start">
				<view class="flex_row_start_center almanac_lunar_more_1">
					<view class="almanac_lunar_more_1_left">建除十二神</view>
					<view>{{lunarInfo.zhiriGod}}</view>
				</view>
				<view class="almanac_lunar_more_3">
					<view class="flex_row_start_start almanac_lunar_more_3_top">
						<view class="almanac_lunar_more_3_top_item bb ">
							<view>吉神宜趋</view>
							<view>{{lunarInfo.jiTrend}}</view>
						</view>
						<view class="almanac_lunar_more_3_top_item">
							<view>胎神</view>
							<view>{{lunarInfo.taiGod}}</view>
						</view>
						<view class="almanac_lunar_more_3_top_item">
							<view>凶神</view>
							<view>{{lunarInfo.xiongAvoid}}</view>
						</view>
					</view>
					<view class="almanac_lunar_more_3_bottom">
						<view class="almanac_lunar_more_3_name">彭祖百忌</view>
						<view class="flex_row_between_center">
							<view>{{lunarInfo.PengZuGan}}</view>
							<view>{{lunarInfo.PengZuZhi}}</view>
						</view>
					</view>
				</view>
				<view class="flex_row_start_center almanac_lunar_more_2">
					<view class="almanac_lunar_more_2_right">二十八星宿</view>
					<view>{{lunarInfo.xinxu}}</view>
				</view>
			</view>
			<view class="almanac_lunar_hours flex_row_start_center">
				<view class="almanac_lunar_hours_name">时辰吉凶</view>
				<view class="flex_row_start_center almanac_lunar_hours_list">
					<view class="almanac_lunar_hours_item" v-for="(item,index) in lunarHours" :key="index">
						<view>{{item.hourName}}</view>
						<view :class="item.hourLuck=='吉' ? 'almanac_lunar_hours_ji':'almanac_lunar_hours_yi'">{{item.hourLuck}}</view>
					</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {Solar,SolarMonth,Lunar,HolidayUtil}from'@/pages/common/lunar.js';
	export default {
		data(){
			return{
				lunarInfo:{
					nowYear:'',
					nowMonth:'',
					nowDay:'',
					week:'',
					lunarYear:'',
					lunarMonth:'',
					lunarDay:'',
					ganZhiYear:'',
					ganZhiMonth:'',
					ganZhiDay:'',
					yi:'',//宜
					ji:'',//忌
					taiGod:'',//胎神
					jiTrend:'',//吉神宜趋
					xiongAvoid:'',//凶神宜忌
					PengZuZhi:'',//彭祖百忌
					PengZuGan:'',//彭祖百忌
					wuxing:'',//五行
					chong:'',//相冲
					sha:'',//煞
					zhiriGod:'',//建除十二神 当值星
					xinxu:'',//二十八星宿
				},
				jiGodDirection:{
					xi:'',
					yingui:'',
					yanggui:'',
					cai:'',
					fu:'',
				},//吉神方位
				lunarHours:[]
			}
		},
		onLoad(){
			this.getTime()
			this.getLunarInfo()
			this.getLunarHours()
		},
		methods:{
			//获取日期
			getTime(){
				var m = Solar.fromDate(new Date());
				///获取阳历年月日
				this.lunarInfo.nowYear=m._p.year
				this.lunarInfo.nowMonth=this.$withData(m._p.month)
				this.lunarInfo.nowDay=this.$withData(m._p.day)
			},
			changeTime(e){
				
				let item=e.detail.value.split('-')
				this.lunarInfo.nowYear=item[0]
				this.lunarInfo.nowMonth=item[1]
				this.lunarInfo.nowDay=item[2]
				
				this.getLunarInfo()
				this.getLunarHours()
			},
			getright(){
				var days_per_month = new Array(31, 28 + this.isLeap(this.lunarInfo.nowYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
				// 当月天数
				var nowMonthDay = days_per_month[parseInt(this.lunarInfo.nowMonth)- 1]
				if( this.lunarInfo.nowDay>=nowMonthDay){
					//下个月
					//判断本月是否是12月
					let Month=this.lunarInfo.nowMonth
					this.lunarInfo.nowYear=Month==12 ? this.lunarInfo.nowYear+1:this.lunarInfo.nowYear
					this.lunarInfo.nowMonth=Month==12 ? this.$withData(1):this.$withData((parseInt(Month)+1))
					this.lunarInfo.nowDay=this.$withData(1)
					
				}else{
					//本月
					this.lunarInfo.nowDay=this.$withData(parseInt(this.lunarInfo.nowDay)+1)
				}
				this.getLunarInfo()
				this.getLunarHours()
			},
			getleft(){
				var days_per_month = new Array(31, 28 + this.isLeap(this.lunarInfo.nowYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
			
				// 上月天数
				var lastMonthDay = days_per_month[parseInt(this.lunarInfo.nowMonth)- 2]
				if( this.lunarInfo.nowDay==1){
					//上个月
					console.log('上个月');
					//判断本月是否是1月
					let Month=parseInt(this.lunarInfo.nowMonth)
					this.lunarInfo.nowYear=Month==1 ? this.lunarInfo.nowYear-1:this.lunarInfo.nowYear
					this.lunarInfo.nowMonth=Month==1? 12:this.$withData(Month-1)
					this.lunarInfo.nowDay=this.$withData(lastMonthDay)
					
				}else{
					//本月
					this.lunarInfo.nowDay=this.$withData(parseInt(this.lunarInfo.nowDay)-1)
				}
				this.getLunarInfo()
				this.getLunarHours()
			},
			/*闰年 时间判断*/
			isLeap(year) {
				return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
			},
			getLunarInfo(){
				var d = Lunar.fromDate(new Date(this.lunarInfo.nowYear,parseInt(this.lunarInfo.nowMonth)-1,parseInt(this.lunarInfo.nowDay)));
				//获取星期几
				this.lunarInfo.week=d.getWeekInChinese()
				//获取阴历月日
				this.lunarInfo.lunarMonth=d.getMonthInChinese()
				this.lunarInfo.lunarDay=d.getDayInChinese()
				//获取天干地支
				this.lunarInfo.ganZhiYear=d.getYearInGanZhiExact()
				this.lunarInfo.ganZhiMonth=d.getMonthInGanZhiExact()
				this.lunarInfo.ganZhiDay=d.getDayInGanZhiExact()
				//获取宜忌
				this.lunarInfo.yi=d.getDayYi();
				this.lunarInfo.ji=d.getDayJi();
                //获取吉神方位	
				this.jiGodDirection.xi=d.getDayPositionXiDesc()
				this.jiGodDirection.yingui=d.getDayPositionYinGuiDesc()
				this.jiGodDirection.yanggui=d.getDayPositionYangGuiDesc()
				this.jiGodDirection.cai=d.getDayPositionCaiDesc()
				this.jiGodDirection.fu=d.getDayPositionFuDesc()
				
				//获取五行
				this.lunarInfo.wuxing=d.getDayNaYin()
				//获取相冲生肖 煞
				this.lunarInfo.chong=d.getDayChongShengXiao()
				this.lunarInfo.sha=d.getDaySha()
				//获取胎神
				this.lunarInfo.taiGod=d.getDayPositionTai()
				//获取吉神宜趋T
				this.lunarInfo.jiTrend=d.getDayJiShen().join(" ")
				this.lunarInfo.xiongAvoid=d.getDayXiongSha().join(" ")
				
				//彭祖百忌
				this.lunarInfo.PengZuGan=d.getPengZuGan()
				this.lunarInfo.PengZuZhi=d.getPengZuZhi()
				
				//建除十二神
				this.lunarInfo.zhiriGod=d.getZhiXing()
				this.lunarInfo.xinxu=d.getXiu()
			},
			getLunarHours(){
				this.lunarHours=[]
				let d = Lunar.fromDate(new Date(this.lunarInfo.nowYear,parseInt(this.lunarInfo.nowMonth)-1,this.lunarInfo.nowDay));
				// 获取当天时辰列表
				var times = d.getTimes();
				for (var i = 0, j = times.length; i < j; i++){
				  let item={}
				  let time = times[i];
				  let standardDate = new Date(this.lunarInfo.nowYear,parseInt(this.lunarInfo.nowMonth)-1,this.lunarInfo.nowDay,
				  time.getMinHm().split(":")[0],time.getMinHm().split(":")[1],'00');
				  let d_standardDate = Lunar.fromDate(standardDate);
				  item.hourName=time.getGanZhi()
				  item.hourLuck=d_standardDate.getTimeTianShenLuck()
				  this.lunarHours.push(item)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.almanac{
		margin-top: 4rpx;
		padding: 10rpx 15rpx;
		background-color: #fff;
	}
	.almanac_top_time{
		padding: 15rpx 0;
		text-align: center;
		border-bottom: 2rpx solid #efefef;
		color: #9b4c3a;
		font-size: 32rpx;
	}
	.almanac_lunar{
		padding: 20rpx 0;
		border-bottom: 2rpx solid #efefef;
		.almanac_lunar_image{
			width: 90rpx;
			height: 90rpx;
		}
		.almanac_lunar_text{
			font-size: 48rpx;
			margin: 0 38rpx;
			color: #9b4c3a;
		}
		.almanac_lunar_time{
			margin-top: 8rpx;
			font-size: 26rpx;
			color: #000;
			& view{
				margin-right: 18rpx;
			}
			& view:last-child{
				margin-right: 0rpx;
			}
		}
	}
	.almanac_lunar_YiJi{
		padding: 28rpx 32rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #efefef;
		.almanac_lunar_YiJi_icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 18rpx;
		}
		.almanac_lunar_YiJi_text{
			width: 600rpx;
			font-size: 28rpx;
			color: #000;
			flex-wrap: wrap;
			& view{
				padding:2rpx 10rpx;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
	
	.almanac_lunar_direction{
		padding: 28rpx 24rpx;
		border-bottom: 2rpx solid #efefef;
		
		.almanac_lunar_direction_name{
			width: 80rpx;
			height: 80rpx;
			line-height: 40rpx;
			text-align: center;
			color: #ec761b;
			font-size: 28rpx;
		}
		.almanac_lunar_direction_right{
			flex: 1;
		}
		.almanac_lunar_direction_item{
			width: 80rpx;
			height: 80rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}
	.almanac_lunar_wuxing{
		border-bottom: 2rpx solid #efefef;
		
		.almanac_lunar_wuxing_item{
			width: 33.3%;
			text-align: center;
			padding: 24rpx 0;
			border-right: 2rpx solid #efefef;
			font-size: 28rpx;
			 
			 &:last-child{
				 border-right: none;
			 }
			.almanac_lunar_wuxing_item_l{
				color: #ec761b;
				margin-right: 16rpx;
			}
		}
	}
	.almanac_lunar_more{
		border-bottom: 2rpx solid #efefef;
		.almanac_lunar_more_1{
			padding: 20rpx 12rpx 20rpx 16rpx ;
			height: 240rpx;
			.almanac_lunar_more_1_left{
				width: 20rpx;
				color: #ec761b;
				line-height: 40rpx;
				margin-right: 28rpx;
			}
			
		}
		.almanac_lunar_more_2{
			padding: 20rpx 12rpx 20rpx 16rpx ;
			height: 240rpx;
			
			.almanac_lunar_more_2_right{
				width: 20rpx;
				color: #ec761b;
				line-height: 40rpx;
				margin-right: 28rpx;
			}
			
		}
		.almanac_lunar_more_3{
			width: 100%;
			font-size: 28rpx;
			border-left: 2rpx solid #efefef;
			border-right: 2rpx solid #efefef;
			.almanac_lunar_more_3_top{
				
				.almanac_lunar_more_3_top_item{
					width: 33.3%;
					// border-right: 2rpx solid #efefef;
					&:last-child{
						border-right: none;
					}
				    & view:first-child{
						text-align: center;
						color: #ec761b;
						padding: 4rpx 6rpx 6rpx 6rpx;
					}
					& view:last-child{
						text-align: center;
						padding: 4rpx 6rpx 6rpx 6rpx;
					}
				}
			}
			
			.almanac_lunar_more_3_bottom{
				height: 120rpx;
				padding: 20rpx;
				border-top: 2rpx solid #efefef;
				.almanac_lunar_more_3_name{
					text-align: center;
					color: #ec761b;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	
	.almanac_lunar_hours{
		padding: 10rpx 32rpx;
		border-bottom: 2rpx solid #efefef;
		
		.almanac_lunar_hours_name{
			width: 80rpx;
			height: 80rpx;
			line-height: 40rpx;
			text-align: center;
			color: #ec761b;
			font-size: 28rpx;
			margin-right: 24rpx;
		}
		.almanac_lunar_hours_list{
			flex-wrap: wrap;
			
			.almanac_lunar_hours_item{
				width: 40rpx;
				font-size: 28rpx;
				text-align: center;
			}
			.almanac_lunar_hours_yi{
				color: #b85a62;
			}
			.almanac_lunar_hours_ji{
				color: #45882a;
			}
		}
	}
	
</style>